<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .div-card {
            border: 1px gray solid;
            border-radius: 10px;
            padding: 15px;
        }

        .div-card-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .div-card-son {
            width: 100px;
            height: 100px;
            color: darkgray;
            font-size: 15px;
        }
    </style>
  </head>

  <body>
    <!--float属性值为不浮动none、左浮动left和右浮动right，浮动使元素脱离文档流并依附于父容器左边或右边-->
    <div style="display: flex;column-gap: 20px;align-items: flex-start">
      <div class="div-card">
        <div class="div-card-title">`float: left`左浮动</div>
        <div class="div-card-body">
          <div class="div-card-son" style="background: pink;margin:10px;float: left">float: left</div>
          <div class="div-card-son" style="background: skyblue;width: 200px;height: 200px">
            文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在
          </div>
        </div>
      </div>

      <div class="div-card">
        <div class="div-card-title">`float: right`右浮动</div>
        <div class="div-card-body">
          <div class="div-card-son" style="background: pink;margin:10px;float: right">float: right</div>
          <div class="div-card-son" style="background: skyblue;width: 200px;height: 200px">
            文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在
          </div>
        </div>
      </div>

      <div class="div-card">
        <div class="div-card-title">`float: none`不浮动</div>
        <div class="div-card-body">
          <div class="div-card-son" style="background: pink;float: none">float: none</div>
          <div class="div-card-son" style="background: skyblue;width: 200px;height: 200px"></div>
        </div>
      </div>
    </div>
    <br>

    <!--浮动特点-->
    <!--**①浮动元素脱离文档流并依附于父容器左边或右边**。浮动元素脱离文档流后其前方元素布局不受浮动影响，其后方元素上移并从浮动元素下方开始布局，文字环绕于浮动元素周围。浮动元素的浮动范围在其父容器之内，父容器的宽高不再依靠浮动元素支撑，所以可能造成高度塌陷-->
    <div class="div-card">
      <div class="div-card-title">浮动元素脱离文档流并依附于父容器左边或右边</div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;margin:10px;float: left">float: left</div>
        <div class="div-card-son" style="background: skyblue;width: 800px;height: 60px">
          浮动元素脱离文档流后其前方元素布局不受浮动影响，其后方元素上移并从浮动元素下方开始布局，文字环绕于浮动元素周围。浮动元素的浮动范围在其父容器之内，父容器的宽高不再依靠浮动元素支撑，所以可能造成高度塌陷
        </div>
      </div>
    </div>
    <br>
    <div class="div-card">
      <div class="div-card-title">浮动元素脱离文档流并依附于父容器左边或右边</div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;margin:10px;float: left">float: left</div>
        <div class="div-card-son" style="background: skyblue;width: 800px;height: 150px">
          浮动元素脱离文档流后其前方元素布局不受浮动影响，其后方元素上移并从浮动元素下方开始布局，文字环绕于浮动元素周围。浮动元素的浮动范围在其父容器之内，父容器的宽高不再依靠浮动元素支撑，所以可能造成高度塌陷
        </div>
      </div>
    </div>
    <br>
    <!--②多个浮动元素之间按顺序布局，后方浮动元素不会覆盖前方浮动元素-->
    <div class="div-card">
      <div class="div-card-title">多个浮动元素之间按顺序布局，后方浮动元素不会覆盖前方浮动元素</div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;margin:10px;float: left">float: left</div>
        <div class="div-card-son" style="background: skyblue;margin:10px;float: left">float: left</div>
        <div class="div-card-son" style="background: plum;margin:10px;float: right">float: right</div>
        <div class="div-card-son" style="background: wheat;width: 100%;height: 150px">
          多个浮动元素之间按顺序布局，后方浮动元素不会覆盖前方浮动元素
        </div>
      </div>
    </div>
    <br>
    <!--③块级元素和内联元素浮动后其外部显示类型为内联和块级的中间态inline-block-->
    <div class="div-card" style="height: 150px">
      <div class="div-card-title">块级元素和内联元素浮动后其外部显示类型为内联和块级的中间态inline-block</div>
      <div class="div-card-body">
        <div class="div-card-son" style="background: pink;margin:10px;float: left">div设置宽高</div>
        <div style="background: skyblue;color: darkgray;margin:10px;float: left">div未设置宽高</div>
        <div class="div-card-son" style="background: plum;margin:10px;float: right">div设置宽高</div>
      </div>
    </div>
    <br>
    <div class="div-card" style="height: 150px">
      <div class="div-card-title">块级元素和内联元素浮动后其外部显示类型为内联和块级的中间态inline-block</div>
      <div class="div-card-body">
        <span class="div-card-son" style="background: pink;margin:10px;float: left">span设置宽高</span>
        <span style="background: skyblue;color: darkgray;margin:10px;float: left">span未设置宽高</span>
        <span class="div-card-son" style="background: plum;margin:10px;float: right">span设置宽高</span>
      </div>
    </div>
    <br>

    <!--clear属性值为清除左浮动left、清除右浮动right和清除左右浮动both-->
    <div style="display: flex;column-gap: 20px;align-items: flex-start">
      <div class="div-card">
        <div class="div-card-title">正常浮动</div>
        <div class="div-card-body">
          <div class="div-card-son" style="background: pink;float: left">float: left</div>
          <div class="div-card-son" style="background: plum;height:150px;float: right">float: right</div>
          <div class="div-card-son" style="background: skyblue;width: 300px;height: 200px">
            文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在
          </div>
        </div>
      </div>

      <div class="div-card">
        <div class="div-card-title">`clear: left`清除左浮动</div>
        <div class="div-card-body">
          <div class="div-card-son" style="background: pink;float: left">float: left</div>
          <div class="div-card-son" style="background: plum;height:150px;float: right">float: right</div>
          <div class="div-card-son" style="background: skyblue;width: 300px;height: 200px;clear: left">
            文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在
          </div>
        </div>
      </div>

      <div class="div-card">
        <div class="div-card-title">`clear: right`清除右浮动</div>
        <div class="div-card-body">
          <div class="div-card-son" style="background: pink;height:150px;float: left">float: left</div>
          <div class="div-card-son" style="background: plum;float: right">float: right</div>
          <div class="div-card-son" style="background: skyblue;width: 300px;height: 200px;clear: right">
            文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在
          </div>
        </div>
      </div>

      <div class="div-card">
        <div class="div-card-title">`clear: both`清除左右浮动</div>
        <div class="div-card-body">
          <div class="div-card-son" style="background: pink;height:150px;float: left">float: left</div>
          <div class="div-card-son" style="background: plum;float: right">float: right</div>
          <div class="div-card-son" style="background: skyblue;width: 300px;height: 200px;clear: both">
            文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在浮动元素周围文字环绕在
          </div>
        </div>
      </div>
    </div>
    <br>
  </body>
</html>